import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import api from '../utils/api';

const Login = () => {
  const [form, setForm] = useState({
    username: '',
    password: '',
  });
  const [error, setError] = useState('');
  const navigate = useNavigate();

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    setError('');

    try {
      const response = await api.post('/auth/login', form);
      
      if (response.data.status === 'success') {
        localStorage.setItem('token', response.data.token || '');
        navigate('/dashboard');
      } else {
        setError(response.data.message || '登录失败');
      }
    } catch (err) {
      setError('服务器错误，请稍后再试');
      console.error('登录失败：', err);
    }
  };

  return (
    // 最外层容器：全屏铺满
    <div style={{
      display: 'flex',
      justifyContent: 'center', // 水平居中
      alignItems: 'center',     // 垂直居中
      width: '100vw',           // 宽度占满整个视口
      height: '100vh',          // 高度占满整个视口
      backgroundColor: 'White', // 白色背景，与注册页统一
      padding: '20px',          // 适当内边距，避免内容紧贴边缘
      boxSizing: 'border-box',
      overflow: 'auto'          // 内容过多时允许滚动
    }}>
      {/* 登录卡片：保持居中，但不再限制最大宽度 */}
      <div style={{
        width: '100%',
        maxWidth: '400px',       // 最大宽度限制，在大屏幕上保持适当大小
        backgroundColor: 'white',
        padding: '40px 30px',
        borderRadius: '10px',    // 稍微增加圆角
        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)', // 增强阴影效果
        boxSizing: 'border-box'
      }}>
        {/* 标题区域 */}
        <div style={{
          textAlign: 'center',
          marginBottom: '30px'
        }}>
          <h2 style={{
            margin: 0,
            color: '#1a1a1a',
            fontSize: '28px',      // 稍微增大字体
            fontWeight: 600
          }}>登录账户</h2>
          <p style={{
            color: '#666',
            marginTop: '8px',
            fontSize: '14px'
          }}>请输入用户名和密码登录</p>
        </div>

        {/* 错误提示 */}
        {error && (
          <div style={{
            color: '#ff4d4f',      // 更明显的红色
            backgroundColor: 'rgba(255, 77, 79, 0.1)', // 半透明背景
            border: '1px solid rgba(255, 77, 79, 0.2)',
            borderRadius: '6px',
            padding: '12px',
            marginBottom: '20px',
            textAlign: 'center'
          }}>
            {error}
          </div>
        )}

        {/* 登录表单 */}
        <form onSubmit={handleLogin}>
          {/* 用户名输入框 */}
          <div style={{ marginBottom: '20px' }}>
            <label style={{
              display: 'block',
              marginBottom: '8px',
              color: '#333',
              fontSize: '14px',
              fontWeight: 500
            }}>用户名</label>
            <input
              type="text"
              name="username"
              value={form.username}
              onChange={handleChange}
              required
              style={{
                width: '100%',
                padding: '14px 15px', // 增加高度，提升可用性
                borderRadius: '6px',  // 与注册页统一圆角
                border: '1px solid #ddd',
                fontSize: '16px',
                boxSizing: 'border-box',
                transition: 'border-color 0.2s' // 添加边框过渡效果
              }}
              onFocus={(e) => e.target.style.borderColor = '#1677ff'} // 聚焦时边框变蓝
              onBlur={(e) => e.target.style.borderColor = '#ddd'}
            />
          </div>

          {/* 密码输入框 */}
          <div style={{ marginBottom: '25px' }}>
            <label style={{
              display: 'block',
              marginBottom: '8px',
              color: '#333',
              fontSize: '14px',
              fontWeight: 500
            }}>密码</label>
            <input
              type="password"
              name="password"
              value={form.password}
              onChange={handleChange}
              required
              style={{
                width: '100%',
                padding: '14px 15px',
                borderRadius: '6px',
                border: '1px solid #ddd',
                fontSize: '16px',
                boxSizing: 'border-box',
                transition: 'border-color 0.2s'
              }}
              onFocus={(e) => e.target.style.borderColor = '#1677ff'}
              onBlur={(e) => e.target.style.borderColor = '#ddd'}
            />
          </div>

          {/* 登录按钮 */}
          <button
            type="submit"
            style={{
              width: '100%',
              padding: '14px',      // 增加高度，与输入框统一
              backgroundColor: '#1677ff', // 与背景色统一
              color: 'white',
              border: 'none',
              borderRadius: '6px',
              fontSize: '16px',
              fontWeight: 500,
              cursor: 'pointer',
              transition: 'background-color 0.2s' // 添加背景过渡
            }}
            onMouseOver={(e) => e.target.style.backgroundColor = '#0f62d9'} // 悬停时颜色加深
            onMouseOut={(e) => e.target.style.backgroundColor = '#1677ff'}
          >
            登录
          </button>
        </form>

        {/* 注册按钮 */}
        <div style={{ marginTop: '15px' }}>
          <button
            type="button"
            onClick={() => navigate('/register')}
            style={{
              width: '100%',
              padding: '14px',
              backgroundColor: 'white',
              color: '#1677ff',
              border: '1px solid #1677ff',
              borderRadius: '6px',
              fontSize: '16px',
              fontWeight: 500,
              cursor: 'pointer',
              transition: 'background-color 0.2s'
            }}
            onMouseOver={(e) => e.target.style.backgroundColor = '#f0f7ff'} // 悬停时背景变浅蓝
            onMouseOut={(e) => e.target.style.backgroundColor = 'white'}
          >
            注册新账号
          </button>
        </div>

        {/* 忘记密码链接 */}
        <div style={{
          textAlign: 'center',
          marginTop: '15px'
        }}>
          <Link to="#" style={{
            color: '#1677ff',
            textDecoration: 'none',
            fontSize: '14px'
          }}>
            忘记密码？(待开发)
          </Link>
        </div>
      </div>
    </div>
  );
};

export default Login;